<template>
    <view>
        <view class="main">
            <view class="top">
                <text class="top-text">个人入园凭证</text>
            </view>
            <view class="time">
                <text class="time-text">2024年9月{{day}} {{period}}</text>
            </view>
            <view class="yuyue">
                <text class="yuyue-text">预约信息</text>
            </view>
            <uni-card class="card">
                <view class="yuyue-text2">姓名：{{record[0].personal1.name}}</view>
                <view class="yuyue-text2">证件类型：{{record[0].personal1.card_type}}</view>
                <view class="yuyue-text2">证件号码：{{record[0].personal1.card}}</view>
                <view class="yuyue-text2">手机号码：{{record[0].personal1.phone}}</view>
                <view class="yuyue-text2">同行儿童数：{{record[0].personal1.children_name}}</view>
                <view class="yuyue-text2">同行成人：{{record[0].personal1.aduit}}</view>
            </uni-card>
            <view class="flawor">
                 <text class="flawor-text">园区花草，种植不易请爱护</text>
            </view>
        </view>
        <view class="res-time">
            <text class="res-time-text">离凭证消失剩余</text>
            <text class="res-time-text2">{{ days }}天 {{ hours }}小时 {{ minutes }}分钟 {{ seconds }}秒</text>
            <text class="res-time-text">。可发起新的预约</text>
        </view>
    </view>
</template>

<script setup>
import {ref} from 'vue'
import data from '../../data/y_data.json'

let record = ref([])
record = data.record

import {  onMounted, onBeforeUnmount } from 'vue';

const countdown = ref(60 * 60 * 24 * 3 + 60 * 60 * 2 + 60 * 5); // 倒计时时间，以秒为单位，例如3天2小时5分钟

const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);

let timer = null;

const startCountdown = () => {
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
      days.value = Math.floor(countdown.value / (60 * 60 * 24));
      hours.value = Math.floor((countdown.value % (60 * 60 * 24)) / (60 * 60));
      minutes.value = Math.floor((countdown.value % (60 * 60)) / 60);
      seconds.value = countdown.value % 60;
    } else {
      clearInterval(timer);
    }
  }, 1000);
};

onMounted(() => {
  startCountdown();
});

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }
});
let day =sessionStorage.getItem("day")
let period = sessionStorage.getItem("period")
</script>

<style scoped>
    .main{
        width: 95%;
        height:600px ;
        margin:0 12px;
        background-image: url('../../static/back@2x.png');
        background-size: cover;
        Background-repeat: no-repeat;
    }
    .top{
        text-align: center;
        padding-top: 33px;
    }
    .top-text{
        opacity: 0.9;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 20px;
        color: #000000;
        letter-spacing: 0;
        text-align: center;
        line-height: 20px;
    }
    .time{
        text-align: center;
        margin-top: 20px;
    }
    .time-text{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #5F5F5F;
        letter-spacing: 0;
    }
    .yuyue{
        margin-left: 16px;
        margin-top: 43px;
    }
    .yuyue-text{
        font-family: PingFangSC-Medium;
        font-weight: 700;
        font-size: 15px;
        color: #000000;
        letter-spacing: 0;
    }
    .card{
        width: 87%;
        border-radius: 12px;
        margin-left: 16px;
    }
    .yuyue-text2{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 15px;
        color: #000000;
        letter-spacing: 0;
        margin-bottom: 13px;
    }
    .flawor{
        margin-top: 122px;
        text-align: center;
    }
    .flawor-text{
       font-family: PingFangSC-Regular;
       font-weight: 400;
       font-size: 12px;
       color: #5F5F5F;
       letter-spacing: 0;
    }
    .res-time{
        margin-top: 40px;
        height: 48px;
        text-align: center;
    }
    .res-time-text{
         color: #5f5f5f;
         font-size: 12px;
         font-face: PingFangSC;
         font-weight: 400;
         line-height: 0;
         letter-spacing: 0;
         paragraph-spacing: 0;
         text-align: left;
    }
    .res-time-text2{
         color: #8dcb6d;
         font-size: 12px;
         font-face: PingFangSC;
         font-weight: 400;
         line-height: 0;
         letter-spacing: 0;
         paragraph-spacing: 0;
         text-align: left;
    }
</style>
